  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  template {
      height: 100%;
  }

  .screen{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
     background-image: url(../assets/背景图.png); 
      background-size: cover;
      background-repeat: no-repeat; 
  }

  .main{
      width: 98%;
      height: 98%;
      display: flex;
      flex-direction: column;
      /* background-image: url(../assets/背景图.png); */
     
      background-size: cover;
      background-repeat: no-repeat; 

     
  }

  .top {
      width: 100%;
      height: 5%;
     
      
  }
   .jiange{
    width: 100%;
    height: 3%;
  } 

  .bottom {
      width: 100%;
      /* height: 92%; */
      flex-grow: 1;
      display: flex;
    background-image: url(../assets/背景图.png);
    border-style: solid;
    border-color: #ffffff67;
    background-size: cover;
        background-repeat: no-repeat;
        border-radius: 5px;

  }

  .left {
      width: 33.333%;
      display: flex;
      flex-direction: column;
  }

  .center {
    width: 33.333%;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
  }

  .right {
      width: 33.333%;
      display: flex;
      flex-direction: column;
  }

  .s1 {
      width: 100%;
      height: 50%;
      /* background-color: aliceblue; */

  }

  .x1 {
      flex-grow: 1;
      /* background-color: blueviolet; */
  }

  .s2 {
      width: 100%;
      height: 50%;
      /* background-color: blueviolet; */

  }

  .x2 {
      flex-grow: 0;
      /* background-color: aliceblue; */
  }

  .s3 {
      width: 100%;
      height: 50%;
      /* background-color: aliceblue; */

  }

  .x3 {
      flex-grow: 1;
      /* background-color: blueviolet; */
  }